<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()
// const password = ref('')
// ruoter
const router = useRouter()
const value = ref('')

const goToDetail = () =>{
  showDialog({
    title: '提示',
    message: '供应商详情'
  }).then(() => {
    // on close
  })
}

const goToChat = () =>{
  router.push({ path: '/account/login' })
}


onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <div class="index-warp">
  <navbar title="交易商" :left="true"> </navbar>
  <van-search v-model="value" placeholder="请输入交易商" />
  <div class="page">
  <van-cell-group>
    <van-cell title="单元格">
      <template #title>
        <div class="custom-title" @click="goToChat">
          <div class="logo">
            <img src="../../../assets/img/chat/default-user.png" />
          </div>
          <div>
            <h3>AAAAAAA</h3>
            <p>描述</p>
          </div>
        </div>
        <!-- <van-tag type="primary">标签</van-tag> -->
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <div class="custom-icon" @click="goToDetail">
          <van-icon name="info-o" />
        </div>
      </template>
    </van-cell>
  </van-cell-group>
</div>
  <div class="footer-text" @click="show">找不到您的交易商？</div>
</div>
</template>

<style scoped lang="scss">
.index-warp{
  flex: 1;
  height: 100vh;
    display: flex;
    flex-direction: column;
}
.page {
  flex: 1;
    overflow: auto;
    height: auto;
}
.custom-title {
  display: flex;
  width: 80%;
  .logo {
    margin-right: 10px;
  }
  img {
    width: 40px;
    height: 40px;
  }
}
.custom-icon {
  display: flex;
  align-items: center;
}
.footer-text{
  display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    font-size: 14px;
    font-weight: 700;
    padding:10px;
    border-top: 1px solid #d5d5d5;
}
</style>
